<template>
	<view class="content">
		<view class="content-list">
			<c-list class="forgetting-list" v-model:loading="loading" v-model:error="error" error-text="请求失败，点击重新加载"
				@load="Loads">
				<view class="isnull"> 
					<text>暂无站内信息</text>  
				</view>
				<!-- <van-empty description="暂无数据" v-if="list.length===0" /> -->
				<view class="forgetting-item" v-for="(item,index) in list" :key="index">
					<view class="item-type">
						<view class="item-type-left">
							{{item.type===1?'公告':'上课'}}
						</view>
						<view class="item-type-right">
							{{item.create_time}}
						</view>
					</view>
					<view class="item-title">
						<text>{{item.title}}

						</text>
						<!-- 	<view class="dot">
			
						</view> -->
					</view>
					<view class="item-menu">
						<view class="item-menu-left">
							<text
								class="item-menu-left-1">接收对象：{{item.teacher.teacher_nickname}}({{item.teacher.teacher_phone}})</text>
							<text class="item-menu-left-1"
								:class="{'item-menu-left-2':item.state===0}">{{item.state===0?'【未读】':'【已读】'}}</text>
						</view>
						<view class="item-menu-right" @click="readItem(index)">
							<text>{{current===index?'展开收起':'展开查看'}}</text>
							<image src="../../static/messageIcon.png" mode="widthFix" class="img-url"></image>

						</view>
					</view>
					<view class="open-box" v-if="current===index">
						{{item.message}}
					</view>
				</view>

			</c-list>
		</view>

	</view>
</template>

<script setup>
	import {
		getSystemMessageList
	} from "@/apis/message.js"
	import timeSelct from "../../components/timeSelct/index.vue"
	import {
		getTimeDate
	} from "../../utils/index.js"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive
	} from "vue"
	const pramas = reactive({
		page: 1,
		size: 20,
	})
	const list = ref([]);
	const error = ref(false);
	const loading = ref(false);
	const current = ref(-1)
	const total = ref(0)
	const listLoading = ref(false)
	onLoad(() => {

		init()

	})
	const init = async (type) => {
		try {
			if (listLoading.value) {
				return
			}
			listLoading.value = true;
			if (type) {
				pramas.page = pramas.page + 1
			}
			let {
				data
			} = await getSystemMessageList(pramas)

			if (data && data.data.length > 0) {
				total.value = data.total

				list.value = [...list.value, ...data.data]
			}
			listLoading.value = false;
			// console.log('触底加载')
			console.log(list.value)
		} catch (err) {
			listLoading.value = false;
			console.log(err)
		}



	}

	const Loads = () => {


		init(1)
		loading.value = false;
		error.value = false;


	};
	const readItem = (index) => {
		if (index === current.value) {
			current.value = -1
		} else {
			current.value = index
		}
		// current.value = index === current.value ? -1 : current.value
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		height: 100vh;
		padding-top: 20rpx;
	}

	.content-list {

		width: 670rpx;
		flex: 1;
		overflow: hidden;
	}

	.forgetting-item {
		display: flex;
		flex-direction: column;
		width: 670rpx;
		min-height: 117.18rpx;
		opacity: 1;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 1);
		border: 1.75rpx solid rgba(236, 236, 236, 1);
		box-shadow: 0px 3.5rpx 3.5rpx rgba(0, 0, 0, 0.06);
		margin-bottom: 15rpx;
		padding: 24rpx 24rpx;
	}

	.item-type {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;

		.item-type-left {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			color: rgba(255, 255, 255, 1);
			text-align: left;
			padding: 0rpx 5rpx;
			background: rgba(212, 48, 48, 1);

		}

		.item-type-right {

			/** 文本1 */
			font-size: 28rpx;
			font-weight: 700;
			line-height: 30rpx;
			color: rgba(153, 153, 153, 1);

		}
	}

	.item-title {
		display: flex;
		width: 100%;
		margin-top: 16rpx;

		text {
			font-size: 30rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 36rpx;
			color: rgba(51, 51, 51, 1);
		}

	}

	.dot {
		width: 14rpx;
		height: 14rpx;
		background: rgba(255, 20, 20, 1);
		border-radius: 50%;
		margin-left: 8rpx;
		transform: translateY(-50%);
	}

	.item-menu {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-top: 12rpx;
	}

	.item-menu-left {
		display: flex;

		.item-menu-left-1 {
			color: rgba(153, 153, 153, 1);
			font-size: 24rpx;
		}

		.item-menu-left-2 {
			font-size: 24rpx;
			color: rgba(51, 51, 51, 1);
		}
	}

	.item-menu-right {
		display: flex;
		align-items: center;

		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;

		.img-url {
			width: 24rpx;
			height: 24px;
			margin-left: 8rpx;
		}
	}

	.open-box {
		width: 100%;
		text-indent: 2em;
		font-size: 28rpx;
		line-height: 36rpx;
		margin-top: 16rpx;

	}

	.isnull {
		display: flex;
		align-items: center;
		justify-content: center; 
		width: 100%;
		color: #969799;
		margin: 260rpx 0;
		font-size: 32rpx;
	}
</style>